<template>
  <ScreenLayoutWithMenu title="市场分析监控大屏">
    <div class="screen-grid grid-2x3">
      <ChartCard title="市场趋势" grid-area="a">
        <ECharts :option="marketTrendOption" />
      </ChartCard>
      <ChartCard title="竞争分析" grid-area="b">
        <ECharts :option="competitionOption" />
      </ChartCard>
      <ChartCard title="市场指标" grid-area="c">
        <div class="kpi-container">
          <div class="kpi-item">
            <div class="kpi-label">市场份额</div>
            <div class="kpi-value">28.5%</div>
            <div class="kpi-change positive">↑ 2.3%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">品牌认知度</div>
            <div class="kpi-value">85.6%</div>
            <div class="kpi-change positive">↑ 5.2%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">用户忠诚度</div>
            <div class="kpi-value">72.3%</div>
            <div class="kpi-change positive">↑ 3.1%</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="区域市场" grid-area="d">
        <ECharts :option="regionMarketOption" />
      </ChartCard>
      <ChartCard title="产品市场表现" grid-area="e">
        <ECharts :option="productMarketOption" />
      </ChartCard>
      <ChartCard title="营销效果" grid-area="f">
        <ECharts :option="marketingOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const marketTrendOption = ref({})
const competitionOption = ref({})
const regionMarketOption = ref({})
const productMarketOption = ref({})
const marketingOption = ref({})

onMounted(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月']
  
  marketTrendOption.value = getLineOption({
    categories: months,
    series: [{
      name: '市场份额',
      data: [25, 26, 26.5, 27, 27.5, 28.5]
    }]
  })

  competitionOption.value = getBarOption({
    categories: ['品牌A', '品牌B', '品牌C', '品牌D', '我们'],
    series: [{
      name: '市场份额',
      data: [30, 25, 20, 15, 10]
    }]
  })

  regionMarketOption.value = getPieOption({
    name: '区域市场',
    data: [
      { value: 35, name: '华东' },
      { value: 28, name: '华北' },
      { value: 20, name: '华南' },
      { value: 12, name: '西南' },
      { value: 5, name: '其他' }
    ]
  })

  productMarketOption.value = getBarOption({
    categories: ['产品A', '产品B', '产品C', '产品D', '产品E'],
    series: [{
      name: '销量',
      data: generateRandomData(5).data.sort((a, b) => b - a)
    }]
  })

  marketingOption.value = getLineOption({
    categories: months,
    series: [{
      name: '转化率',
      data: [2.5, 2.8, 3.0, 3.2, 3.5, 3.8]
    }]
  })
})
</script>
